<template>
	<view class="wp" v-if="info.isshow>0">
		<view class="title">
			<image :src="info.info.pic" mode="heightFix"></image>
			<uni-countdown style="flex: 1;margin-left: 10upx;" :day="day" :hour="hour" :minute="minute" :second="second" color="#FFFFFF"
				background-color="#000" />
			<view class="more" @click="$navTo('/pages/product/flashkilling')">
				更多>
			</view>
		</view>
		<view class="list">
			<view class="item" v-for="item in info.goodsList0" @click="$navTo('/pages/product/product?id='+item.id)">
				<view class="l_image">
					<image :src="item.thumb" ></image>
				</view>
				<view class="money">
					<text style="font-weight: bold;">￥{{item.saleprice | handNum}}</text>
					<text>￥{{item.productprice | handNum}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'limited_time',
		props: {
			info: {
				type: Object,
				default: () => ({
					info: {
						pic: ''
					},
					goodsList0: [],
					time: 0,
					isshow: 0
				})
			}
		},
		computed: {
			second() {
				return this.info.time % 60;
			},
			minute() {
				return this.info.time / 60 % 60;
			},
			hour() {
				return this.info.time / 60 / 60 % 24;
			},
			day() {
				return this.info.time / 60 / 60 / 24;
			}
		},
		filters: {
			handNum(v) {
				return parseFloat(v);
			}
		}
	}
</script>

<style lang="scss">
	.wp {
		border-radius: 20upx;
		background-color: #fff;
		padding: 0 20upx;
		overflow: hidden;

		.title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20upx 0;

			image {
				height: 70upx;
			}

			.more {
				color: #999;
			}
		}

		.list {

			.item {
				box-sizing: border-box;
				display: inline-block;
				width: calc((100% - 30upx)/4);
				margin-right: 10upx;
				padding-bottom: 20upx;

				.l_image {
					width: 100%;
					padding-bottom: 100%;
					position: relative;

					image {
						position: absolute;
						top: 0;
						left: 0;
						height: 100%;
						width: 100%;
					}
				}

				.money {
					font-size: 26upx;
					color: #fa436a;

					text:nth-of-type(2) {
						font-size: 20upx;
						color: #999;
						text-decoration: line-through;
					}
				}
			}

			.item:nth-of-type(4n + 4) {
				margin-right: 0;
			}
		}
	}
</style>